<template>
	<view class="container">
		<view class="user-center-card ">
			<view class="user-center-card__title" :style="{ 'padding-top': `${paddingTop}px` }">个人中心</view>
			<view class="user-center-card__headSculpture" @click="gotoUserEditPage" v-if="userId">
				<image v-if="userInfo.avatar" :src="userInfo.avatar" lazy-load="true" mode="aspectFit/aspectFill" />
				<image v-else src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/avater-default.png"
					shape="round" error="slot" />
				<view class="user-center-card__userName">
					<text>{{ userInfo.name }}</text>
				</view>
			</view>
			<view class="user-center-card__headSculpture" @click="$goPath(2, '/pages/pocketShop/mine/login')" v-else>
				<image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/avater-default.png" shape="round" error="slot" />
				<view class="user-center-card__userName">
					<text>您还未登录,点击这里登录</text>
				</view>
			</view>
		</view>
		<view class="content-wrapper">
			<view class="order-group-wrapper">
				<order-group :orderTagInfos="orderTagInfos" @onClickTop="allOrder" @onClickItem="orderItem" />
			</view>
			<view v-for="(item, index) in menuData" :key="index" class="cell-box" @click="goPath(item.url, item.type)">
				<u-cell-group :border="false">
					<u-cell :icon="item.iconName" :title="item.title" isLink  size="large"></u-cell>
				</u-cell-group>
			</view>
		</view>
		<tabbar :currentTab='2' :type="1" />

	</view>
</template>
<script>
	import orderGroup from '@/components/orderGroup/index';
	import {
		getUserInfo
	} from '@/common/auth';
	export default {
		components: {
			orderGroup
		},
		data() {
			return {
				paddingTop: 50,
				userInfo: {},
				userId: getUserInfo().ypdUser?.userId || null,
				orderTagInfos: [{
						title: '待付款',
						iconName: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/unpaid.png',
						orderNum: 0,
						tabType: 1,
						status: 1,
					},
					{
						title: '待发货',
						iconName: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/unshipped.png',
						orderNum: 0,
						tabType: 2,
						status: 1,
					},
					{
						title: '已发货',
						iconName: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/shipped.png',
						orderNum: 0,
						tabType: 3,
						status: 1,
					},
					{
						title: '待评价',
						iconName: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/evaluate.png',
						orderNum: 0,
						tabType: 4,
						status: 1,
					}
				],
				menuData: [{
						title: '我的收藏',
						url: '/pages/premiumBag/mine/collection',
						type: 'collect',
						iconName: '/static/icon/collect.png'
					},
					{
						title: '加入我们',
						url: '/pages/premiumBag/mine/joinUs',
						type: 'joinUs',
						iconName: '/static/icon/joinUs.png'
					},
					{
						title: '收货地址',
						url: '/pages/premiumBag/mine/address',
						type: 'address',
						iconName: '/static/icon/address.png'
					},
					{
						title: '用户反馈',
						url: '/pages/premiumBag/mine/feedback',
						type: 'feedback',
						iconName: '/static/icon/feedback.png'
					},
					{
						title: '设置',
						url: '/pages/premiumBag/mine/setting',
						type: 'setting',
						iconName: '/static/icon/setting.png',
					},
				]
			}
		},
		onLoad() {

		},
		onShow() {
			let app = uni.getSystemInfoSync()
			this.paddingTop = app.statusBarHeight
			if (!this.userId) return
			this.getUserInfo();
			this.getOrderNum()
		},
		methods: {
			async getOrderNum() {
				const {
					userId
				} = this;
				let result = await this.$request.miniOrderNum({
					userId
				})
				let obj = result.data
				this.orderTagInfos[0].orderNum = obj.waitPay
				this.orderTagInfos[1].orderNum = obj.waitSend
				this.orderTagInfos[2].orderNum = obj.delivery
				this.orderTagInfos[3].orderNum = obj.waitEvaluate
			},
			async getUserInfo() {
				const {
					userId
				} = this;
				const {
					data
				} = await this.$request.miniGetUserInfo({
					userId
				})
				this.userInfo = data
			},
			gotoUserEditPage() {
				const {
					userInfo
				} = this;
				if (!this.userId) return this.$toast('您还未登录,请先去登录!')
				userInfo.avatar = encodeURIComponent(userInfo.avatar);
				userInfo.phoneNumber = userInfo.phone;
				this.$goPath(2, `/pages/premiumBag/mine/userInfo`)
			},
			goPath(url, type) {
				if (type == 'setting') {
					this.$goPath(2, url)
				}
				if (!this.userId) return this.$toast('您还未登录,请先去登录!')
				this.$goPath(2, url)
			},
			orderItem(status) {
				if (!this.userId) return this.$toast('您还未登录,请先去登录!')
				this.$goPath(2, `/pages/premiumBag/mine/orderList?status=${status}`)
			},
			allOrder() {
				if (!this.userId) return this.$toast('您还未登录,请先去登录!')
				this.$goPath(2, `/pages/premiumBag/mine/orderList?status=-1`)
			},
		},
	}
</script>
<style scoped>
	page {
		background-color: #f5f5f5;
		height: 100vh;
	}

	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.user-center-card {
		width: 100%;
		height: 480rpx;
		background-image: url(https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/28a3ff7c-d51b-44be-8826-0f58db2b274d.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 0 24rpx;
		color: #333;
	}

	.user-center-card__title {
		font-size: 40rpx;
		font-family: 'PingFang SC-Bold', 'PingFang SC';
		font-weight: bold;
	}

	.user-center-card__headSculpture {
		display: flex;
		align-items: center;
		margin-top: 24rpx;
		font-size: 30rpx;
		font-family: 'PingFang SC-Medium', 'PingFang SC';
		font-weight: 500;
		color: #333333;
	}

	.user-center-card__headSculpture>image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50% 50%;
		display: block;
		margin-right: 15rpx;
	}

	.user-center-card__userName>view>text {
		font-size: 22rpx;
		font-family: 'PingFang SC-Regular', 'PingFang SC';
		font-weight: 400;
		color: #333333;
	}

	.content-wrapper {
		flex: 1;
		position: relative;
		padding: 0 30rpx;
		top: -145rpx;
	}

	.main-content {
		height: 500rpx;
	}

	.order-group-wrapper {
		margin-bottom: 16rpx;
	}

	.order-group-wrapper image {
		width: 55rpx;
		height: 50rpx;
	}

	.order-group-wrapper .grid-text {
		padding-top: 25rpx;
	}


	.order-group-note {
		font-size: 28rpx;
	}

	.cell-box {
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		/* margin-bottom: 20rpx; */
		/* padding: 0 24rpx; */
		box-sizing: border-box;
	}

	.icon-color {
		color: #aaa;
	}

	.cell-class {
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.order-content {
		overflow: hidden;
		width: 100%;
		display: flex;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.order-item {
		flex: 1;
		height: 180rpx;
		overflow: hidden;
		position: relative;
		text-align: center;
	}

	.order-content-box {
		margin: auto;
		position: absolute;
		width: 100%;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.order-content-t {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #333;
		letter-spacing: 0;
		text-align: center;
	}

	.popup-content {
		background: #f5f5f5;
		margin-bottom: env(safe-area-inset-bottom);
		border-radius: 16rpx 16rpx 0 0;
	}

	.popup-content .popup-title {
		background: #fff;
		text-align: center;
		font-size: 24rpx;
		color: #999;
		height: 112rpx;
		text-align: center;
		line-height: 112rpx;
		border-radius: 16rpx 16rpx 0 0;
	}

	.border-bottom-1px {
		position: relative;
	}

	.border-bottom-1px::after {
		position: absolute;
		display: block;
		content: '';
		box-sizing: border-box;
		top: 0;
		left: 0;
		width: 200%;
		height: 200%;
		transform: scale(0.5);
		transform-origin: left top;
		border-bottom: 2rpx solid #e5e5e5;
	}

	.popup-content .popup-phone,
	.popup-content .popup-close {
		background: #fff;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333;
	}

	.popup-content .popup-phone.online {
		margin-bottom: 20rpx;
	}

	.popup-content .popup-phone.online::after {
		content: none;
	}

	.popup-content .popup-close {
		color: #333;
		border: 0;
		margin-top: 16rpx;
	}

	.my-order {
		border-radius: 10rpx;
	}

	.footer__version {
		text-align: center;
		margin-top: 50rpx;
		color: #999;
		margin-bottom: 4rpx;
		font-size: 24rpx;
		line-height: 32rpx;
	}

	.cell-box .order-group__left {
		margin-right: 0;
	}

	.cell-box .t-cell-padding {
		padding: 24rpx 18rpx 24rpx 32rpx;
		border-bottom: 2rpx solid rgba(241, 241, 241, 0.8);
	}

	.t-class {
		color: #333 !important;
	}
</style>